/** 日期范围 initDateLine **/
.dateline-l,
.dateline-r,
.date-trigger{ background: url("../images/dateline.gif") #fff no-repeat; }
.dateline{
    display: inline-block;
    vertical-align: bottom; /* TODO why not middle?? */
    height: 30px;
    position: relative;
    overflow: visible;
    font-size: 12px;
}
.date-trigger{
    background-position: right -89px;
    font-size: 12px;
}
.date-trigger.now{
    color: white;
    background-position: right -209px;
    background-color: #3278dc;
}
.dateline-l{
    float: left;
    background-position: center -9px;
    width: 24px; height: 100%;
    border: 1px solid #dadee9;
    cursor: pointer;
}
.dateline-r{
    float: left;
    background-position: center -49px;
    width: 24px; height: 100%;
    border: 1px solid #dadee9;
    cursor: pointer;
}
.dateline > .dateline-l{ background-position: center -5px; }
.dateline > .dateline-r{ background-position: center -45px; }
.dateline-c{
    float: left;
    width: 229px;
    padding-left: 8px;
    height: 100%; line-height: 28px;
    border-top: 1px solid #dadee9;
    border-bottom: 1px solid #dadee9;
    text-align: left;
    background-position: right -85px;
}
.dateline-c.now{ background-position: right -205px; }
.dateline-c > span{
    float: left;
    text-align: center;
    width: 102px;
}
/* dateline-min */
.dateline-min{ height: 23px; }
.dateline-min > .dateline-l{ background-position: center -9px; }
.dateline-min > .dateline-r{ background-position: center -49px; }
.dateline-min > .dateline-c{ line-height: 21px; background-position: right -89px; }
.dateline-min > .dateline-c.now{ line-height: 21px; background-position: right -209px; }
/* dateline-layer */
.dateline-layer{
    position: absolute;
    z-index: 999;
    display: none;
}
.dateline-layer.now{ display: block; }
.date-body{
    margin: -1px auto 0;
    position: relative;
    border: 1px solid #dadee9;
    background: #fff;
    width: 327px;
}
.date-select{
    width: 218px;
    margin: 10px auto 0;
    cursor: pointer;
}
.date-option{
    float: left;
    width: 109px;
    border: 1px solid #dadee9;
    border-left: none;
    text-align: center;
    height: 24px;
    line-height: 22px;
    font-size: 12px;
}
.date-option:first-child{ border-left: 1px solid #dadee9; }
.date-option.now{ background: #f0f2f5; }
.date-container{
    width: 100%;
    padding: 12px 0;
    overflow: hidden;
}
.date-container[data-type="month"]{
    padding-bottom: 10px;
    width: 222px;
    margin: 0 auto;
}
.date-line{
    padding: 0 5px;
    line-height: 23px;
}
.date-line > *{ float: left; }
.date-line > .date-trigger{
    width: 93px;
    height: 23px;
    line-height: 21px;
    border: solid 1px #dadee9;
    cursor: pointer;
    margin: 0 5px; padding: 0 5px;
}
.date-btn{
    float: right;
    width: 72px;
    height: 23px; line-height: 21px;
    text-align: center;
    border: 1px solid #dadee9;
    cursor: pointer;
    margin: 10px 6px 0 0;
}
.date-custom-trigger{ text-align: center; }
.date-custom-select{
    text-align: left;
    position: relative;
    border: 1px solid #ccc;
    background: #fff;
    min-width: 250px;
    line-height: 24px;
}
.date-custom-select li{ padding-left: 10px; }
.date-custom-select li:hover{
    background: #3278dc;
    color: #fff;
}
.date-month-head{ margin-left: 41px; }
.date-month-head > .dateline-l,
.date-month-head > .dateline-r{
    border: solid 1px #dadee9;
    height: 23px;
}
.date-month-body{ padding: 10px 8px 0; }
.date-month-body li{
    float: left;
    border: 1px solid #dadee9;
    width: 35px; height: 28px;
    line-height: 26px;
    text-align: center; cursor: pointer;
    font-size: 12px; margin-top: -1px; margin-left: -1px;
}
.date-month-body li:hover,
.date-month-body li.currentMonth{ background: #3278dc; color: #fff; }
.date-month-body li.cannotSelect{ background: #f0f0f0; color: #ccc; cursor: not-allowed; }
.date-body > [data-type]{ display: none; }
.date-body > [data-type].now{ display: block; }